<template>
    <div class="single welcome">
        <div class="container">
            <h3 class="agileits-title">{{form.type}}</h3>
            <div class="markets-grids">
                <div class="col-md-12 w3ls_single_left">
                    <div class="w3ls_single_left_grid">
                        <div class="w3ls_single_left_grid_right">
                            <h3>{{form.title}}</h3>
                            <h5>{{form.timestamp}}</h5>
                            <ul>
                                <li><span aria-hidden="true"></span>发布人：{{form.author}}</li>
                                <li><span class="fa fa-envelope-o" aria-hidden="true"></span>{{total}} 评论</li>
                                <li><span class="fa fa-heart-o" aria-hidden="true"></span>{{form.count}} 点击量</li>
                            </ul>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="w3ls_single_left_grid1">
                        <img :src="'data:image/png;base64,' +form.image" alt=" " class="img-responsive" style="margin: auto;" />
                    <hr>
                        <p style="padding: 0 6px;" v-html="form.content"></p>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>

        </div>
        <div class="agileits_three_comments" style="background-color: #eee;padding-left: 36rem;">
            <h3>评论区</h3>
            <div class="agileits_three_comment_grid agileits_three_comment_grid1" v-for="item in comments_lst" :key="item.id">
                <div class="agileits_tom">
                    <i class="fa fa-user" aria-hidden="true"></i>
                </div>
                    <div>
                        <h5 v-if="item.replied_id">回复：{{item.reply_username}}</h5>
                        <p v-if="item.replied_id">{{item.reply_msg}}</p>
                    </div>
                <div class="agileits_tom_right" >
                    <div class="hardy">
                        <h4>{{item.username}}</h4>
                        <p>{{item.timestamp}}</p>
                    </div>
                    <div class="clearfix"> </div>
                    <p class="lorem">{{item.msg}}</p>

                    <div class="reply">
                        <el-button  @click="replyto(item.username, item.id)">回复</el-button>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>

            <pagination-box :num="total" :name="'/detail'"></pagination-box>

            <div class="w3_leave_comment">
                <h3 >评论</h3>
                <br>
                <el-alert :title="'回复：' + username" type="info" show-icon v-if="username" @close="username = ''"></el-alert>
                <a name="comment"></a>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item  prop="msg">
                        <textarea placeholder="内容" v-model="ruleForm.msg"></textarea>                        
                    </el-form-item>
                    <input type="submit" value="发表评论" @click="submit('ruleForm')">
                </el-form>
            </div>
            
        </div>

    </div>
</template>

<script>
import pagination from './subcomponents/pagination.vue'
    export default {
        data() {
            return {
                form: {
					author: '',
					category: '',
					content: '',
					title: '',
					type: '',
					count: 0,
                    timestamp:'',
                    image:'',
                },
                ruleForm:{
                     msg:'',
                },
                rules:{
                    msg: [
                        { required: true, message: '请输入评论内容', trigger: 'blur' }
                    ]
                },
                username:'',
                replied_id:'', // 被回复的评论 id           
                adopt_id:this.$route.params.id,
                comments_lst:[],
                total:0,
                page:this.$route.query.page || 1
            }
        },
        beforeCreate(){
            
        },
        created(){
            this.detail(),
            this.getComments()  
            this.increase()
        },
        watch:{
            '$route'(to, from){
                if(to.query.page != from.query.page){
                    this.page = to.query.page
                    this.getComments()
                }
            }
        },
        computed:{
        },
        methods: {  
            increase(){
                let formdata = new FormData()
                this.form.count += 1
                const path = 'http://10.138.120.46:5000/api/count/' + this.adopt_id
                formdata.append('count', this.form.count)
                var config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
                    }
                };
                this.axios.post(path, formdata, config).then((resposne)=>{
                    if(resposne.status === 200){
                        alert('ok')
                    }
                })
            }, 
            replyto(username, id){
                this.username = username
                this.replied_id = id
                window.location.href = '#comment'
            } ,
            detail(){
                var that = this
                var api='http://10.138.120.46:5000/api/pets_detail/' + this.$route.params.id + '?page=' + this.page
                this.axios.get(api).then((response)=>{
                    //get body data
                    that.form.category = response.data.category
                    that.form.title = response.data.title
                    that.form.author = response.data.author
                    that.form.type = response.data.type
                    that.form.content = response.data.content
                    that.form.count = response.data.count
                    that.form.timestamp = response.data.timestamp
                    that.form.image = response.data.image
                }).catch(()=>{
                    
                }) 
            },
            getComments(){
                var that = this
                var path='http://10.138.120.46:5000/api/adopt_comments/' + this.adopt_id + '?page=' + this.page
                this.axios.get(path).then((response)=>{
                    that.total = response.data[0]
                    that.comments_lst = response.data.slice(1)
                }).catch((error)=>{
                    alert(error)
                }) 
            },
            submit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.$store.state.UID){
                            const path = 'http://10.138.120.46:5000/api/add_comment/' + this.adopt_id
                            let formdata = new FormData()
                            var config = {
                                headers: {
                                    'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
                                }
                            };
                            formdata.append('uid', this.$store.state.UID)
                            formdata.append('replied_id', this.replied_id)
                            formdata.append('msg', this.ruleForm.msg)
                            var that = this
                            this.axios.post(path, formdata, config).then((resposne)=>{
                                if(resposne.status === 200){
                                    that.$message({
                                        type:'success',
                                        message:'评论发布成功！'
                                    })
                                    that.ruleForm.msg = ''
                                    that.getComments()
                                }      
                            }).catch((error)=>{
                                alert(error)
                            })
                        }else{
                            this.$message({
                                type:'warning',
                                message:'请先登录！'
                            })
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        components:{
            'pagination-box':pagination
        }
    }
</script>

<style lang="scss" scoped>
    .welcome {
        padding-top: 5rem;
    }

    .agileits_three_comments {
        padding: 3rem 0 5rem 0;
    }
    .reply{
        float: right;
        padding-right: 7rem;
    }
</style>